<template>
  <div class="app-container">
    <div>
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="号码分组" prop="keywords">
          <el-select
            v-model="queryParams.groupId"
            placeholder="请选择号码分组"
            style="width: 200px"
            clearable
          >
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="群发号码" prop="mobile">
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入群发号码"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="目标号码" prop="target">
          <el-input
            v-model="queryParams.target"
            placeholder="请输入目标号码"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="result">
          <el-select
            v-model="queryParams.result"
            placeholder="请选择状态"
            style="width: 200px"
            clearable
          >
            <el-option label="成功" value="success"/>
            <el-option label="失败" value="fail"/>
          </el-select>
        </el-form-item>
        <el-form-item label="app类型" prop="bundle">
          <el-select
            v-model="queryParams.bundle"
            placeholder="请选择app类型"
            style="width: 200px"
            clearable
          >
            <el-option label="个人版" value="net.whatsapp.WhatsApp"/>
            <el-option label="商务版" value="net.whatsapp.WhatsAppSMB"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="群发号码" prop="mobile" />
        <el-table-column label="目标号码" prop="target" />
        <el-table-column label="号码分组" prop="groupName" />
        <el-table-column label="状态" prop="result">
          <template #default="{row}">
            <el-tag type="success" v-if="row.result == 'success'">成功</el-tag>
            <el-tag type="danger" v-if="row.result == 'fail'">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="失败原因" prop="reason">
          <template #default="{row}">
            {{ row.reason || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" prop="updatedAt">
          <template #default="{row}">{{ row.updatedAt ? formatDate(row.updatedAt) : '--' }}</template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.size"
          :page-sizes="[10, 20, 30, 50, 100]"
          :size="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>


<script setup>
import { formatDate } from "@/utils";
import { recordListApi, groupListApi } from '@/api/equipmentManagement/massTexting.api'
import { useParamStore } from '@/store'
const route = useRoute();
const { setParams, getParams, removeFalsyValues } = useParamStore()
const name = route.fullPath + '2'
onMounted(() => {
  if(!!getParams(name)) {
    queryParams.value = getParams(name)
  }
  getList()
})
const paging = ref({
  size: 10,
  page: 1,
  total: 0,
})

const handleSizeChange = (e) => {
  paging.value.size = e
  getList()
}
const handleCurrentChange = (e) => {
  paging.value.page = e
  getList()
}

const ids = ref([])
const loading = ref(false)
const tableData = ref([])
const queryParams = ref({
  bundle: 'net.whatsapp.WhatsApp',
  mobile: '',
  target: '',
  result: '',
  groupId: '',
})
const handleQuery = () => {
  paging.value.page = 1
  paging.value.size = 10
  setParams(queryParams.value, name)
  getList()
}
const queryFormRef = ref(null)
const handleResetQuery = () => {
  queryFormRef.value.resetFields()
}
const handleSelectionChange = () => {}
const handleAddClick = () => {}
const handleDelete = () => {}

const getList = () => {
  loading.value = true
  recordListApi({
    page: paging.value.page,
    size: paging.value.size,
    app: 'WA',
    bundle: queryParams.value.bundle || void undefined,
    mobile: queryParams.value.mobile || void undefined,
    target: queryParams.value.target || void undefined,
    result: queryParams.value.result || void undefined,
  }).then(res => {
    tableData.value = res.rows
    paging.value.total = res.count
    loading.value = false
  }).finally(() => {
    loading.value = false
  })
}
const groupList = ref([])
const getGroupList = () => {
  groupListApi({
    page: 1,
    size: 1000,
    app: 'WA',
    bundle: 'net.whatsapp.WhatsApp',
    ...queryParams.value
  }).then(res => {
    groupList.value = res.rows
  })
}
getGroupList()
</script>

<style scoped lang="scss">
.pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
